// 进度条
import { Steps, Popover, Select, Input, Radio, Tabs, Checkbox, Row, Col } from 'antd';
// import { useState} from 'react'
import './nquire.css'
// 发货按钮
// import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
// 详情表格
import { Table } from 'antd';
// 弹框
import React, { useState, useEffect } from 'react';
import { Modal, Button } from 'antd';
// 路由
import { useHistory } from 'react-router-dom';
import http from '../../utils/http';
// mobx
import orderMobx from '../../mobx/order'
import { observer } from 'mobx-react';
// 转时间
import * as dayjs from 'dayjs';
// 弹框中的下拉框
const { Option } = Select;
// 弹框中的选框
// import { Checkbox, Row, Col } from 'antd';

const { Step } = Steps;
function Nquire() {
    // 进度条
    // const customDot = (dot, { status, index }) => (
    //     <Popover
    //       content={
    //         <span>
    //           step {index} status: {status}
    //         </span>
    //       }
    //     >
    //       {dot}
    //     </Popover>
    //   );
    const [current, curentn] = useState(0)
    const onChange = current => {
        curentn(current)
        // console.log('onChange:', current);

        // this.setState({ current });
    };
    // 返回
    const history = useHistory();
    const fanhui = () => {
        history.push({ pathname: '/admin/order' })
    }
    const jingtu = [
        {

        }
    ]


    // const { current } = this.state;
    // 详情的表格

    const columns = [
        {
            title: '商品信息',
            dataIndex: 'ggg',
            key: 'ggg',
           
            render: ggg => {
                return (
                    <div className="W_shnagping">
                        <img className="W_img" src={ggg.img} alt="" />
                        <span className="W_spxx">{ggg.fff}</span>
                    </div>
                )
            },
        },
        {
            title: '规格',
            dataIndex: 'gunge',
            key: 'gunge',
            responsive: ['md'],
           
            render: gunge => {
                return (
                    <span className="gungecss">{gunge}</span>
                )
            },
        },
        {
            title: '单价',
            dataIndex: 'danjia',
            key: 'danjia',
            responsive: ['lg'],
            render: danjia => {
                return (
                    <span>{danjia}</span>
                )
            },
        },
        {
            title: '数量',
            dataIndex: 'jianshu',
            key: 'jianshu',
            responsive: ['lg'],
            render: jianshu => {
                return (
                    <span>{jianshu}件</span>
                )
            },
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'zhuangtai',
            responsive: ['lg'],
            render: zhuangtai => {
                return (
                    <span>{zhuangtai}</span>
                )
            },
        },
        {
            title: '结算',
            dataIndex: 'jiesuanzhuantai',
            key: 'jiesuanzhuantai',
            responsive: ['lg'],
            render: jiesuanzhuantai => {
                return (
                    <span>{jiesuanzhuantai}</span>
                )
            },
        },
        {
            title: '实付款',
            dataIndex: 'may',
            key: 'may',
            responsive: ['lg'],
            render: may => {
                return (
                    <span className="W_may">￥{may}</span>
                )
            },
        },
    ];

    const data =orderMobx.ordergoods
    // [
        // {
        //     key: '3',
        //     ggg: {
        //         fff: 'XY2019062113141000532188888888888888888888888888888888888888888888888888',
        //         img: 'https://img0.baidu.com/it/u=3637253816,3603290807&fm=26&fmt=auto&gp=0.jpg',
        //     },
        //     danjia: 2,
        //     jianshu: 32,
        //     zhuangtai: '待付款',
        //     gunge: '蓝色',
        //     jiesuanzhuantai: '未结算',
        //     may: '64:00',
        // },
    // ];

    // 弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);

    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 单选框
    const [value, setValue] = React.useState(1);
    const danonChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    //   弹框中的tib选项
    const { TabPane } = Tabs;

    function callback(key) {
        console.log(key);
    }
    // 多选框
    // 未发货
    function weionChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    // 已发货
    function yionChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }


    const orderid = JSON.parse(sessionStorage.getItem('orderid'))

    // 回显数据函数
    const orderhuixianshuju = () => {
        return http({
            url: '/wangfanghua/order/orderid',
            method: 'get',
            data: {
                id: orderid
            }
        }).then((res) => {

            if ((res.code >= 200 && res.code < 300) || res.code == 304) {
                let arr = res.data.data
                let arr2 = res.data.data1
                if (res.code == 200) {
                    if (arr[0].state == 1) {
                        arr[0].state = '待付款';
                        curentn(0)
                        arr[0].operation_time = dayjs(Number(arr[0].operation_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].pay_time='';
                        arr[0].send_goods_time='';
                        arr[0].order_end_time='';
                    } else if (arr[0].state == 2) {
                        curentn(1)
                        arr[0].pay_time = dayjs(Number(arr[0].pay_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].operation_time = dayjs(Number(arr[0].operation_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].send_goods_time='';
                        arr[0].order_end_time='';
                        arr[0].state = '待发货';
                    } else if (arr[0].state == 3) {
                        curentn(2)
                        arr[0].pay_time = dayjs(Number(arr[0].pay_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].operation_time = dayjs(Number(arr[0].operation_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].send_goods_time = dayjs(Number(arr[0].send_goods_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].order_end_time='';
                        arr[0].state = '待收货';
                    } else if (arr[0].state == 4) {
                        curentn(3)
                        arr[0].pay_time = dayjs(Number(arr[0].pay_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].operation_time = dayjs(Number(arr[0].operation_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].send_goods_time = dayjs(Number(arr[0].send_goods_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].order_end_time = dayjs(Number(arr[0].order_end_time)).format('YYYY-MM-DD hh:mm:ss');
                        arr[0].state = '已完成';
                    } else {
                        arr[0].state = '已失效';
                    }
                    if (arr[0].type == 1) {
                        arr[0].type = '未结算'
                    } else {
                        arr[0].type = '已结算'
                    }
                    let data2 = {
                        orderno: arr[0].express_no,
                        operation_time: arr[0].operation_time,
                        pay_time: arr[0].pay_time,
                        send_goods_time: arr[0].send_goods_time,
                        order_end_time: arr[0].order_end_time,
                        state: arr[0].state,
                        type: arr[0].type,
                        storename: arr[0].store_name,
                        username: arr[0].user_name,
                        usertel: arr[0].tel,
                        address: arr[0].order_address,


                    };
                    orderMobx.setOrderzhuangtai(data2)
                    console.log(orderMobx.orderzhuangtai, 99999999999)
                    let arr3 = []
                    for (let v of arr2) {
                        arr3.push(v.goods_id)
                    }
                    return arr3
                }
            }
        })
    }
    // 订单商品信息
    const ordergoods = (arr3) => {
        http({
            url: '/wangfanghua/ordergoodsid',
            method: 'get',
            data: {
                //   id:orderMobx.ordergoods.toString()
                id:orderid,
                ids: arr3.toString()
            }
        }).then((res) => {
            console.log(res)
            if ((res.code >= 200 && res.code < 300) || res.code == 304) {
                let arr=[...res.data];  
            
                let arr2=[]       
                for(let v of arr){
                    
                        arr2.push({
                            key:v.id,
                            ggg: {
                                fff: v.name,
                                img: v.image_url,
                            },
                            danjia: v.sell_price,
                            jianshu: v.order_goods_num,
                            zhuangtai: orderMobx.orderzhuangtai.state,
                            gunge: v.information,
                            jiesuanzhuantai: orderMobx.orderzhuangtai.type,
                            may: v.order_goods_num*v.sell_price,
                        })
                    
                   
                    orderMobx.setOrdergoods(arr2)
                }

            }
        
        })
    }
    // 加载前
    // let dataorder = {}
    useEffect(async () => {
        // await orderhuixianshuju()
        let arr3 = await orderhuixianshuju()
        await ordergoods(arr3)
        // await orderMobx.setOrderzhuangtai(dataorder.data2)
        // console.log(dataorder, 9898989898989)

    }, []);
    // 判断是否显示确定按钮
    const quedingannu = () => {
        // console.log(user.zhuangtai)
        if (orderMobx.orderzhuangtai.state == "待发货") {
            return (
                <Button className="w_anniu" type="primary" onClick={showModal}>
                    确定发货
                </Button>
            )
        }
    }
    return (
        <div className="big-card">
            <div className="card-header">
                <h2>订单管理</h2>
            </div>
            <div className="W_box_F">
                {/* 进度条 */}
                <div className="W_box2_H">
                    <div className="W_jin">
                        <Steps current={current} onChange={onChange} labelPlacement='vertical' percent='1' >
                            <Step className="W_time" title="买家下单" description={orderMobx.orderzhuangtai.operation_time}/>
                            <Step title="买家付款" description={orderMobx.orderzhuangtai.pay_time} />
                            <Step title="商家发货" description={orderMobx.orderzhuangtai.send_goods_time} />
                            <Step title="订单完成" description={orderMobx.orderzhuangtai.order_end_time} />
                        </Steps>
                    </div>
                    <div className="W_xq">
                        <div className="W_xxi">
                            <div className="d-f x-s-b W_zhtai">
                                <div className="d-f">
                                    <p className="W_xiao">订单编号：</p>
                                    <p>{orderMobx.orderzhuangtai!={}?orderMobx.orderzhuangtai.orderno:''}</p>
                                    <p>复制</p>
                                </div>
                                <div className="d-f ">
                                    <p>订单状态：</p>
                                    <p className="W_zhuan">{orderMobx.orderzhuangtai.state}（{orderMobx.orderzhuangtai.type}）</p>
                                </div>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">店铺名：</p>
                                <p>{orderMobx.orderzhuangtai.storename}</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">收件人：</p>
                                <p>{orderMobx.orderzhuangtai.username}</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">联系号码：</p>
                                <p>{orderMobx.orderzhuangtai.usertel}</p>
                            </div>
                            <div className="d-f">
                                <p className="W_xiao">收件地址：</p>
                                <p>{orderMobx.orderzhuangtai.address}</p>
                            </div>
                            <div>
                                {quedingannu()}
                            </div>
                        </div>

                    </div>

                </div>
                {/* 商品的详细信息 */}
                <div className="W_biao">
                    <div className="W_ge">
                        <Table  pagination={false} columns={columns} dataSource={data} />
                    </div>
                </div>
                {/* 返回 */}
                <div className="w_fanhui">
                    <Button onClick={fanhui} className="bul" type="primary">
                        返回
                    </Button>
                </div>

                {/* 弹框 */}
                <Modal

                    title="订单发货"
                    visible={isModalVisible}
                    onOk={handleOk}





                    onCancel={handleCancel}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <div className="d-f W_tank">
                        <span className="w_fshang">  收件人  ： </span>
                        <div>
                            <div><span>联系人：</span><span>9/15988559955</span></div>
                            <div><span>地址：</span><span>浙江省杭州市上城区某某地方</span></div>
                        </div>
                    </div>
                    <div className="d-f W_tank">
                        <span className="w_fshang">快递公司：</span>
                        <Select
                            showSearch
                            style={{ width: 300 }}
                            placeholder="快递公司"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            filterSort={(optionA, optionB) =>
                                optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                            }
                        >
                            <Option value="中通快递">中通快递</Option>
                            <Option value="韵达快递">韵达快递</Option>
                            <Option value="圆通快递">圆通快递</Option>
                            <Option value="京东快递">京东快递</Option>
                            <Option value="邮政快递">邮政快递</Option>
                        </Select>
                    </div>
                    <div className="d-f W_tank">
                        <span className="w_fshang">快递单号：</span><Input style={{ width: '300px', height: '33px' }} placeholder="快递单号" />
                    </div>
                    <div className="d-f W_tank">
                        <span className="w_fshang">发货类型：</span>
                        <Radio.Group onChange={danonChange} value={value}>
                            <Radio value={1}>按订单发货</Radio>
                            <Radio value={2}>商品分包裹发货</Radio>
                        </Radio.Group>
                    </div>
                    <div className="d-f w_f_huap">
                        <span className="w_fshang_h">发货商品：</span>
                        <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="未发货" key="1">
                                <Checkbox.Group style={{ width: '100%' }} onChange={weionChange}>
                                    <Row className="w_duofhjdasfgjhfgds">
                                        <div>
                                            <Col span={8}>
                                                <Checkbox value="A">88888888888888888888888888888888</Checkbox>
                                            </Col>
                                        </div>
                                        <Col span={8}>
                                            <Checkbox value="B">B888888888888888888888888</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="C">C8888888888888888888888888</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="D">D8888888888888888888888888888</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="E">E</Checkbox>
                                        </Col>
                                    </Row>
                                </Checkbox.Group>
                            </TabPane>
                            <TabPane tab="已发货" key="2">
                                <Checkbox.Group style={{ width: '100%' }} onChange={weionChange}>
                                    <Row className="w_duofhjdasfgjhfgds">
                                        <Col span={8}>
                                            <Checkbox value="A">A</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="B">B</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="C">C</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="D">D</Checkbox>
                                        </Col>
                                        <Col span={8}>
                                            <Checkbox value="E">E</Checkbox>
                                        </Col>
                                    </Row>
                                </Checkbox.Group>
                            </TabPane>
                        </Tabs>
                    </div>
                </Modal>
            </div>

        </div>
    );
}
export default observer(Nquire);